<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>供应商档案</title>
      <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" >
      <script src="/static/bootstrap/js/bootstrap.bundle.min.js" ></script>
      {% load widget_tweaks %}  <!-- 加载widget_tweaks过滤器 -->
{% load url_exists %}  <!-- 加载widget_tweaks过滤器 -->
  </head>
<body>

<div class="container">
    {% if messages %}
  {% for message in messages %}
    <div class="alert alert-{{ message.tags }}">
      {{ message }}
    </div>
  {% endfor %}
{% endif %}

    <div class="back-link">
        <a href="javascript:history.back()" class="btn-back">← 返回上一级</a>
    </div>
<form method="post" id="form">
<div class="search-form d-flex align-items-center gap-2 mb-3 " >
 {% include "utils/printtools.html"%}
</div>

 <!-- 全局错误信息 -->
        {% if form.non_field_errors %}
            <div class="alert alert-danger">
                {% for error in form.non_field_errors %}
                    <p>{{ error }}</p>
                {% endfor %}
            </div>
        {% endif %}
     {% csrf_token %}
     <!-- pk -->
{#       <input name="pk" type="hidden" value="{{ pk }}">#}
<input name="pk" type="hidden" value="{{ pk|default:'' }}">
<!-- 渲染物料类型单选框（来自表单类） -->
    <div class="mb-3 row">
        <label class="col-sm-2 col-form-label">{{ form.material_type.label }}</label>

        <div class="col-sm-6">
            {% for radio in form.material_type %}
                <div class="form-check form-check-inline">

                    <input
                        type="radio"
                        name="material_type"
                        value="{{ radio.data.value }}"
                        id="{{ radio.id_for_label }}"
                        class="form-check-input material-type-radio"
                        {% if radio.data.value == form.material_type.value %}checked{% endif %}
                        {% if not form.material_type.value and  radio.data.value == 'raw' %}checked{% endif %}
                        {% if pk %}disabled{% endif %}
                    >
                    <label class="form-check-label" for="{{ radio.id_for_label }}">
                        {{ radio.choice_label }}  <!-- 渲染选项文本 -->
                    </label>
                </div>
            {% endfor %}
            {% if form.material_type.errors %}
                <div class="form-error text-danger ">{{ form.material_type.errors.0 }}</div>
            {% endif %}
        <!-- 隐藏字段：用于提交实际值（编辑时必须添加） -->
            {% if pk %}
                <input type="hidden"
                       name="material_type"
                       value="{{ form.material_type.value }}">
            {% endif %}
        </div>
    </div>

<script type="text/javascript">
    // 等待DOM完全加载完成后执行（推荐）
document.addEventListener('DOMContentLoaded', function() {
// 从后端获取映射关系和已选原材料（Django模板变量转JS变量）
const materialRawsMap = {{ material_raws_map|safe }};  // 格式：{物料类型ID: [[原材料ID, 原材料名称], ...]}
{#const selectedRaws = {{ selected_raws|safe }};  // 已选原材料ID列表（编辑时用）#}
{#const isEdit = {{ pk|yesno:"true,false" }};  // 是否为编辑模式#}

// 获取关键DOM元素
const materialTypeRadios = document.querySelectorAll('.material-type-radio');

{#const rawsFieldContainer = document.getElementById('raws-field-container');#}
const rawsSelect = document.getElementById('id_raws_available');
const raws_selected = document.getElementById('id_raws_selected');
const id_raws_hidden = document.getElementById('id_raws_hidden');
{#alert(JSON.stringify(rawsSelect))#}
// 初始化：清空原始选项（避免后端传递的所有原材料显示）
{#rawsSelect.innerHTML = '';#}

// 函数：根据选中的物料类型更新原材料选项
function updateRawsOptions(selectedMaterialTypeId) {

    // 清空现有选项
    rawsSelect.innerHTML = '';
    raws_selected.innerHTML = '';
    id_raws_hidden.innerHTML = '';
    // 获取该物料类型对应的原材料列表
    const rawsList = materialRawsMap[selectedMaterialTypeId] || [];

        // 添加新选项
        rawsList.forEach(item => {
            const option = document.createElement('option');
            option.value = item[0];
            option.textContent = item[1];



            rawsSelect.appendChild(option);
        });

}

// 监听单选框变化
materialTypeRadios.forEach(radio => {
    radio.addEventListener('change', function() {

        if (this.checked) {

            updateRawsOptions(this.value);
        }
    });
});


        })
</script>



        <!-- 手动渲染所有字段，统一Bootstrap样式 -->
        <div class="row">
            <label for="{{ form.name.id_for_label }}" class="col-sm-2 col-form-label">
                {{ form.name.label }}  <!-- 显示标签文本 -->
            </label>
            <div class="col-sm-5">
            {{ form.name|add_class:"form-control" }}  <!-- 添加Bootstrap样式类 -->
            </div>
            {% if form.name.errors %}
                <div class="form-error">{{ form.name.errors.0 }}</div>
            {% endif %}
        </div>

        <div class="mb-3 row">
            <label for="{{ form.jian_pin.id_for_label }}" class="col-sm-2 col-form-label">
                {{ form.jian_pin.label }}  <!-- 显示标签文本 -->
            </label>
            <div class="col-sm-5">
            {{ form.jian_pin|add_class:"form-control col-sm-2" }}
             </div>
            {% if form.jian_pin.errors %}
                <div class="form-error">{{ form.jian_pin.errors.0 }}</div>
            {% endif %}
        </div>

        <div class="mb-3 row">
        <label for="{{ form.quan_pin.id_for_label }}" class="col-sm-2 col-form-label">
                {{ form.quan_pin.label }}  <!-- 显示标签文本 -->
            </label>
            <div class="col-sm-5">
            {{ form.quan_pin|add_class:"form-control col-sm-2" }}
             </div>

            {% if form.quan_pin.errors %}
                <div class="form-error">{{ form.quan_pin.errors.0 }}</div>
            {% endif %}
        </div>





        <div class="mb-3 row">
        <label for="{{ form.state.id_for_label }}" class="col-sm-2 col-form-label">
            {{ form.state.label }}
        </label>
        <div class="col-sm-5">
            {{ form.state|add_class:"form-select" }}
        </div>
            {% if form.state.errors %}
                <div class="form-error">{{ form.state.errors.0 }}</div>
            {% endif %}
        </div>






    <!-- 6. 有效日期（适配日期格式和原生选择器） -->
        <div class="mb-3 row">
            <label for="{{ form.exp_date.id_for_label }}" class="col-sm-2 col-form-label">
                {{ form.exp_date.label }} <span class="text-danger">*</span>
            </label>
            <div class="col-sm-5">
                <!-- 适配表单的DateInput组件，保留format属性 -->
                {{ form.exp_date|add_class:"form-control" }}
            </div>
            {% if form.exp_date.errors %}
                <div class="col-sm-5 offset-sm-2 text-danger mt-1">{{ form.exp_date.errors.0 }}</div>
            {% endif %}
        </div>
        <div class="mb-3 row">
            <label for="{{ form.raws.id_for_label }}" class="col-sm-12 col-form-label">
                {{ form.raws.label }} <div><h8>按住 Ctrl 键（Windows）或 Command 键（Mac）可以多选。</h8></div>
            </label>

            <div class="col-sm-10 offset-sm-1 ">
                {{ form.raws }}
            </div>
                {% if form.raws.errors %}
                    <div class="form-error">{{ form.raws.errors.0 }}</div>
                {% endif %}
            </div>
        <!-- 7. 备注 -->
        <div class="mb-3 row">
            <label for="{{ form.remark.id_for_label }}" class="col-sm-2 col-form-label">
                {{ form.remark.label }}
            </label>
            <div class="col-sm-5">
                {{ form.remark|add_class:"form-control"|attr:"rows:3"|attr:"placeholder:可选，输入备注信息" }}
            </div>
            {% if form.remark.errors %}
                <div class="col-sm-5 offset-sm-2 text-danger mt-1">{{ form.remark.errors.0 }}</div>
            {% endif %}
        </div>




    <!-- 提交按钮 -->
    <button type="submit" class="btn btn-primary">提交</button>
</form>

<!-- 显示全局错误信息（可选） -->
{% if form.non_field_errors %}
    <div class="errors">
        {% for error in form.non_field_errors %}
            <p>{{ error }}</p>
        {% endfor %}
    </div>
{% endif %}
</div>


</body>

<!-- 可选：添加CSS美化返回按钮 -->
<style>
    .back-link {
        margin: 10px 0 20px;
    }
    .btn-back {
        color: #0066cc;
        text-decoration: none;
        font-size: 14px;
    }
    .btn-back:hover {
        text-decoration: underline;
    }
</style>
</html>